<!--
 * @author: sanbao
 * @Date: 2022-07-23 12:49:12
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="my_loanding">
    <el-dialog
      v-model="loadingdata.dialogFormVisible"
      :title="loadingdata.title"
      :width="loadingdata.formwidth"
    >
      <!-- Form -->
      <el-form :model="loandformVal" :rules="loadingdata.rules">
        <template v-for="(item, index) in loadingdata.formlist">
          <!-- 输入框 -->
          <el-form-item
            v-if="item.type == 'input'"
            :label="item.label + ':'"
            :label-width="loadingdata.formleftwidta"
            :prop="item.model"
          >
            <el-input v-model="loandformVal[item.model]" autocomplete="off" />
          </el-form-item>
          <!-- text -->
          <el-form-item
            v-if="item.type == 'text'"
            :label="item.label + ':'"
            :label-width="loadingdata.formleftwidta"
            :prop="item.model"
          >
            {{ loandformVal[item.model] }}
          </el-form-item>
          <!-- select -->
          <el-form-item
            v-if="item.type == 'select'"
            :label="item.label + ':'"
            :label-width="loadingdata.formleftwidta"
            :prop="item.model"
          >
            <el-select v-model="loandformVal[item.model]" placeholder="请选择">
              <el-option
                v-for="(v, i) in item.list"
                :key="index"
                :label="v.label"
                :value="v.roleName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- cascader -->
          <el-form-item
            v-if="item.type == 'cascader'"
            :label="item.label + ':'"
            :label-width="loadingdata.formleftwidta"
            :prop="item.model"
          >
            <el-cascader
              v-model="loandformVal[item.model]"
              :options="item.options"
              :props="{
                value: 'cat_pid',
                label: 'cat_name',
                checkStrictly: true,
              }"
              clearable
            />
          </el-form-item>
          <!-- 虚拟化树形控件 -->
          <el-form-item v-if="item.type == 'expanded'" :prop="item.model">
            <el-tree
              :data="item.data"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="[5]"
              :props="defaultProps"
              @check="checkchange"
            />
          </el-form-item>
        </template>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button
            v-for="(v, i) in loadingdata.formbutton"
            :key="i"
            :type="v.type"
            @click="handelloandbutton(v.action)"
          >
            {{ v.name }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
export default defineComponent({
  props: {
    loadingdata: {
      type: Object,
      default: () => {},
    },
    loandformVal: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  setup(props, { emit }) {
    const handelloandbutton = (action: any) => {
      emit("handelloandbutton", action);
    };
    const defaultProps = {
      children: "children",
      label: "authName",
    };
    const checkchange = (data: any) => {
      console.log(data);
    };
    return {
      handelloandbutton,
      defaultProps,
      checkchange,
    };
  },
});
</script>
